<template>
  <div style="margin: 0px 20px 0px 10px">
    <div class="operation-line">
      <div class="search-group">
        <el-input v-model="planName" placeholder="请输出开明计划名称" style="width: 70%;margin-right: 15px"></el-input>
        <el-button type="primary" @click="searchPlan">搜 索</el-button>
      </div>
      <div class="update-group">
        <el-button type="primary" @click="showInsertDialog">添 加</el-button>
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
      </div>
    </div>
    <div>
      <el-table
        :data="pageData"
        border
        stripe
        fit="true"
        @selection-change="planSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          align="center"
          width="55"></el-table-column>

        <el-table-column
          label="序号"
          align="center"
          width="55"
          type="index"></el-table-column>

        <el-table-column prop="name" label="名称" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="星期一" prop="detail.monday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期二" prop="detail.tuesday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期三" prop="detail.wednesday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期四" prop="detail.thursday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期五" prop="detail.friday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期六" prop="detail.saturday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="星期日" prop="detail.sunday[0]" width="120">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showUpdate(scope)">修改</el-button>
            <el-button type="danger" @click="deleteId(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        style="float: right">
      </el-pagination>

      <!--   添加对话框   -->
      <el-dialog
        title="添加开门计划"
        :visible.sync="insertDialog"
        :before-close="cancelUpdate"
        :close-on-click-modal="false"
        align="center"
        style="font-weight: bold"
        width="80%">
        <div>
          <el-form ref="insertPlan" :model="insertPlan" label-width="80px" size="mini">
            <el-form-item label="计划名称">
              <el-input v-model="insertPlan.name"/>
            </el-form-item>
            <el-row v-for="(value,key,index) in insertPlan.detail">
              <el-form-item :label="index | weekFilter">
                <div :ref="key" class="time-range">
                  <el-col :span="6" v-for="(range,index) in value">
                    <el-input v-model="insertPlan.detail[key][index]" :placeholder="`第 ${index+1} 周`"
                              class="range-input"></el-input>
                  </el-col>
                </div>
              </el-form-item>
            </el-row>

            <el-form-item label="备注">
              <el-input v-model="insertPlan.memo" type="textarea" rows="3"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer">
          <el-button @click="cancelInsert">取 消</el-button>
          <el-button type="primary" @click="insertPlanSubmit">提 交</el-button>
        </span>
      </el-dialog>

      <!--  详细计划对话框  -->
      <el-dialog
        :title="currentPlan.name"
        :visible.sync="detailDialog"
        :before-close="closeDetailDialog"
        align="center"
        style="font-weight: bold"
        width="60%">
        <div style="font-weight: normal">
          <el-table :data="detailArray"
                    border
                    stripe
                    fit="true"
                    style="width: 100%">
            <el-table-column align="center" label="日期" prop="name"/>
            <el-table-column align="center" label="第一周" prop="first"/>
            <el-table-column align="center" label="第二周" prop="second"/>
            <el-table-column align="center" label="第三周" prop="third"/>
            <el-table-column align="center" label="第四周" prop="fourth"/>
          </el-table>

        </div>
        <span slot="footer">
          <el-button type="primary" @click="closeDetailDialog">关 闭</el-button>
        </span>
      </el-dialog>

      <!--   修改对话框   -->
      <el-dialog
        :title="currentPlan.name"
        :visible.sync="updateDialog"
        :before-close="cancelUpdate"
        align="center"
        style="font-weight: bold"
        width="80%">
        <div>
          <!--    遍历detail对象      -->
          <el-row v-for="(value,key,index) in updateDetail">
            <!--   遍历时间短数组         -->
            <el-col :span="4"><span class="update-span"> {{index | weekFilter}} </span></el-col>
            <el-col :span="5" v-for="(range,index) in value">
              <el-input v-model="updateDetail[key][index]" :placeholder="`第 ${index+1} 周`"
                        style="width: 200px"></el-input>
            </el-col>
          </el-row>
        </div>
        <span slot="footer">
          <el-button @click="cancelUpdate">取 消</el-button>
          <el-button type="primary" @click="updateSubmit()">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  let self;
  export default {
    name: 'Plan',
    data() {
      return {
        originalPlanData: {},
        pageData: [],
        planData: {},
        // 打开详细计划对话框
        insertDialog: false,
        detailDialog: false,
        currentPlan: {},
        detailArray: [],
        insertPlan: {
          name: "",
          type: null,
          memo: "",
          detail: {
            monday: ["", "", "", ""],
            tuesday: ["", "", "", ""],
            wednesday: ["", "", "", ""],
            thursday: ["", "", "", ""],
            friday: ["", "", "", ""],
            Saturday: ["", "", "", ""],
            sunday: ["", "", "", ""],
          }
        },
        // 要修改的pageDate索引
        updateIndex: undefined,
        updateDetail: {
          monday: ["", "", "", ""],
          tuesday: ["", "", "", ""],
          wednesday: ["", "", "", ""],
          thursday: ["", "", "", ""],
          friday: ["", "", "", ""],
          Saturday: ["", "", "", ""],
          sunday: ["", "", "", ""],
        },
        //  搜索条件
        planName: "",

        currentPage: 1,

        // 更新对话框
        updateDialog: false,
        // 要删除的ids
        deleteIds: []
      }
    },
    filters: {
      weekFilter: function (value) {
        switch (value) {
          case 0:
            return "周 一";
          case 1:
            return "周 二";
          case 2:
            return "周 三";
          case 3:
            return "周 四";
          case 4:
            return "周 五";
          case 5:
            return "周 六";
          case 6:
            return "周 日";
        }
      }
    },
    mounted() {
      self = this;

      this.originalPlanData = {
        currentPage: 1,
        pageData: [
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 2,
            index: 1,
            name: "默认开门计划",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 1,
            index: 1,
            name: "开门计划1",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 3,
            index: 1,
            name: "开门计划2",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 4,
            index: 1,
            name: "开门计划3",
            syncStatus: 0,
            type: 1
          }, {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 5,
            index: 1,
            name: "开门计划4",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 6,
            index: 1,
            name: "默认开门计划",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 7,
            index: 1,
            name: "开门计划1",
            syncStatus: 0,
            type: 1
          },
          {
            detail: {
              monday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              tuesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              wednesday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              thursday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              friday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              saturday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"],
              sunday: ["00:00-23:59", "00:00-00:00", "00:00-00:00", "00:00-00:00"]
            },
            id: 8,
            index: 1,
            name: "开门计划2",
            syncStatus: 0,
            type: 1
          }
        ],
        pageSize: 20,
        totalPage: 1,
        totalRows: 1000

      };

      this.planData = this.originalPlanData;

      this.pageData = this.planData.pageData;
    },
    methods: {
      showInsertDialog() {
        this.insertDialog = true;
        this.currentPlan = {};
      },
      // 添加卡片授权
      insertPlanSubmit() {
        this.pageData.push(this.insertPlan);
        this.insertDialog = false;
        this.initInsertPlan();
      },
      cancelInsert() {
        this.insertDialog = false;
        this.initInsertPlan();
      },
      initInsertPlan() {
        this.insertPlan = {
          name: "",
          type: null,
          memo: "",
          detail: {
            monday: ["", "", "", ""],
            tuesday: ["", "", "", ""],
            wednesday: ["", "", "", ""],
            thursday: ["", "", "", ""],
            friday: ["", "", "", ""],
            Saturday: ["", "", "", ""],
            sunday: ["", "", "", ""],
          }
        }
      },
      // 模糊搜索
      searchPlan() {
        this.pageData = this.pageData.filter(function (plan) {
          console.log(plan.name + ">>>>>>>>>>>>" + self.planName);
          if (plan.name.indexOf(self.planName) != -1) {
            return true;
          } else {
            return false;
          }
        })
      },
      // 写一个通用的删除 过滤方法
      deletePlan(ids) {
        this.pageData = this.pageData.filter(function (plan) {
          let flag = true;
          ids.forEach((id, index) => {
            if (plan.id == id) flag = false;
          })
          return flag;
        })
      },
      // 打开详细计划对话框
      showDetail(plan) {
        this.detailDialog = true;
        this.currentPlan = plan;
        let detail = plan.detail;
        // 将detail对象转换成数组
        this.detailArray = [
          {
            name: "周一",
            first: detail.monday[0],
            second: detail.monday[1],
            third: detail.monday[2],
            fourth: detail.monday[3]
          },
          {
            name: "周二",
            first: detail.tuesday[0],
            second: detail.tuesday[1],
            third: detail.tuesday[2],
            fourth: detail.tuesday[3]
          },
          {
            name: "周三",
            first: detail.wednesday[0],
            second: detail.wednesday[1],
            third: detail.wednesday[2],
            fourth: detail.wednesday[3]
          },
          {
            name: "周四",
            first: detail.thursday[0],
            second: detail.thursday[1],
            third: detail.thursday[2],
            fourth: detail.thursday[3]
          },
          {
            name: "周五",
            first: detail.friday[0],
            second: detail.friday[1],
            third: detail.friday[2],
            fourth: detail.friday[3]
          },
          {
            name: "周六",
            first: detail.saturday[0],
            second: detail.saturday[1],
            third: detail.saturday[2],
            fourth: detail.saturday[3]
          },
          {
            name: "周日",
            first: detail.sunday[0],
            second: detail.sunday[1],
            third: detail.sunday[2],
            fourth: detail.sunday[3]
          }
        ]
      },
      // 关闭详细对话框
      closeDetailDialog() {
        this.detailDialog = false;
        this.initCurrentData();
        console.log(this.currentPlan);
      },
      // 多选操作
      planSelectionChange(val) {
        this.deleteIds = [];
        val.forEach((item, index) => this.deleteIds.push(item.id))
        console.log("选中信息");
        console.log(this.deleteIds);
      },

      // 批量删除
      batchDelete() {
        this.$confirm('是否确定批量删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deletePlan(this.deleteIds);
          this.$message({
            type: 'success',
            message: '批量删除成功！'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      //单个删除
      deleteId(id) {
        this.$confirm('是否删除该条开门计划?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = [];
          ids.push(id);
          this.deletePlan(ids);
          this.$message({
            type: 'success',
            message: '删除成功！'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      // 打开修改对话框
      showUpdate(scope) {
        this.updateIndex = scope.$index
        this.updateDetail = scope.row.detail
        this.updateDialog = true;
        this.currentPlan = plan;
      },
      // 提交修改
      updateSubmit() {
        this.pageData[this.updateIndex].detail = this.updateDetail;
        this.updateDialog = false;
        this.initCurrentData();
      },
      cancelUpdate(done) {
        this.updateDialog = false;
        this.initCurrentData();
        done();
      },
      // 分页的两个回调函数
      handleSizeChange(val) {

      },
      handleCurrentChange(val) {

      },

      // 初始化对话框中的内容
      initCurrentData() {
        this.detailDialog = false;
        this.currentPlan = {};
        this.detailArray = [];
      },
    }
  }
</script>

<style>
  .update-span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 38px
  }

  .operation-line {
    display: flex;
    margin: 10px 0px;
  }

  .search-group {
    width: 70%;
  }

  .update-group {
    width: 30%;
    display: flex;
    justify-content: center;
  }

  .time-range {
    display: flex;
    justify-content: space-between;
  }

  .range-input {
    padding: 0px 5px;
  }
</style>
